// panel/index.js, this filename needs to match the one registered in package.json

const PACKAGE_NAME = "ccc-font-assistant";

Editor.Panel.extend({
  // css style for panel
  style: `
    :host { margin: 5px; }
    h2 { color: #f90; }
  `,

  // html template for panel
  template: `
    <h2>ccc-font-assistant</h2>
    <hr />
    <ui-input class="medium" id="inputUuid" placeholder=${Editor.T('ccc-font-assistant.uuidPath')}></ui-input>
    <hr />
    <ui-button id="btnAddFont">${Editor.T('ccc-font-assistant.addFont')}</ui-button>
    <hr />
    <ui-button id="btnRemoveFont">${Editor.T('ccc-font-assistant.removeFont')}</ui-button>

    <br>
    <br>
    <br>
    <a href="https://gitee.com/zzhcodes/ccc-font-assistant">${Editor.T('ccc-font-assistant.openSource')}</a>
  `,

  // element and variable binding
  $: {
    btnAddFont: '#btnAddFont',
    btnRemoveFont: '#btnRemoveFont',
    inputUuid: '#inputUuid',
  },

  // method executed when template and styles are successfully loaded and initialized
  ready() {
    this.$btnAddFont.addEventListener('confirm', () => {

      let fontUuid = this.$inputUuid.value;

      let url = Editor.remote.assetdb.uuidToUrl(fontUuid);
      if (!url) {
        Editor.log(Editor.T(`${PACKAGE_NAME}.fontUuidError`));
        return;
      }

      let jsonData = {
        'fontUuid': fontUuid
      }

      Editor.Ipc.sendToMain('ccc-font-assistant:addFont', [jsonData]);
    });

    this.$btnRemoveFont.addEventListener('confirm', () => {

      let fontUuid = this.$inputUuid.value;

      let url = Editor.remote.assetdb.uuidToUrl(fontUuid);
      if (!url) {
        Editor.log(Editor.T(`${PACKAGE_NAME}.fontUuidError`));
        return;
      }

      let jsonData = {
        'fontUuid': fontUuid
      }
      Editor.Ipc.sendToMain('ccc-font-assistant:removeFont', [jsonData]);
    });
  },

  // register your ipc messages here
  messages: {

  }
});